/* 多行文本框组件
 * TextareaComponent.jsx
 */

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';


class TextareaComponent extends Component{

	constructor(props){
		super(props);
	}

	dragStart(e){
		if(this.props.dragStart){
			this.props.dragStart(e,this.props.data.get('id'));
		}
	}

	dragEnd(e){
		if(this.props.dragEnd){
			this.props.dragEnd(e,this.props.data.get('id'));
		}
	}

	onSelectComp(e){
		e.preventDefault()|| e.stopPropagation();//阻止冒泡
		this.props.onSelectComp(this.props.data);
	}

	render(){
		const surface=this.props.data.get('surface');
		const attributes=this.props.data.get('attributes');

		const widthHeight={width: surface.get('width')+'px', height: surface.get('height')+'px'};//宽高
		const posStyle=Object.assign({left: surface.get('x')+'px', top: surface.get('y')+'px'},widthHeight,{display:this.props.data.get('hidden')?'none':'block'});
		const surfaceStyle=Object.assign({transform:'rotate('+surface.get('rotate')+'deg)',opacity:surface.get('opacity')},widthHeight);//旋转度，透明度，背景色,边框
		const borderStyle={border: surface.get('borderSize')+'px '+surface.get('border'),borderRadius: surface.get('borderRadius'),borderColor: surface.get('borderColor')};
		const inputStyle=Object.assign({lineHeight:attributes.get("lineHeight")+'em',fontSize: attributes.get('fontSize')+'px',color:attributes.get('fontColor'),background:attributes.get('background')},widthHeight,borderStyle);

		let divProps={}
		if(this.props.editStage){
			divProps={
				onDragStart:this.dragStart.bind(this),
				onDragEnd:this.dragEnd.bind(this), 
				onClick:this.onSelectComp.bind(this),
				id:this.props.data.get('id')
			}
		}
		return(
			<div {...divProps} className="lg-trailer" style={posStyle} draggable="true">
				<div className="lg-surface lg-surface-textarea" style={surfaceStyle}>
	  				<textarea className="lg-component-textarea" placeholder={attributes.get('placeholder')} style={inputStyle} disabled={true}></textarea>
	  			</div>
  			</div>
		)
	}
}

export default TextareaComponent;